{#<!DOCTYPE html>#}
{#<html lang="zh-CN">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{#    <title>导出超欠挖诊断数据</title>#}
{#    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">#}
{#    <style>#}
{#        body {#}
{#            background-color: #f8f9fa;#}
{#        }#}
{#        .container {#}
{#            margin-top: 50px;#}
{#        }#}
{#        .card {#}
{#            border: none;#}
{#            border-radius: 10px;#}
{#            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        .card-header {#}
{#            background-color: #007bff;#}
{#            color: white;#}
{#            border-top-left-radius: 10px;#}
{#            border-top-right-radius: 10px;#}
{#        }#}
{#        .btn-export {#}
{#            background-color: #28a745;#}
{#            border-color: #28a745;#}
{#        }#}
{#        .btn-export:hover {#}
{#            background-color: #218838;#}
{#            border-color: #1e7e34;#}
{#        }#}
{#        .badge-role {#}
{#            font-size: 0.9rem;#}
{#            padding: 5px 10px;#}
{#            border-radius: 15px;#}
{#        }#}
{#        .badge-admin {#}
{#            background-color: #dc3545;#}
{#            color: white;#}
{#        }#}
{#        .badge-user {#}
{#            background-color: #007bff;#}
{#            color: white;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{##}
{#<!-- 导航栏 -->#}
{#<nav class="navbar navbar-expand-lg navbar-light bg-light">#}
{#    <div class="container-fluid">#}
{#        <a class="navbar-brand" href="#">数据导出</a>#}
{#        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">#}
{#            <span class="navbar-toggler-icon"></span>#}
{#        </button>#}
{#        <div class="collapse navbar-collapse" id="navbarNav">#}
{#            <ul class="navbar-nav">#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link {% if request.resolver_match.url_name == 'export_geological_view' %}active{% endif %}" href="{% url 'export_geological_view' %}">掌子面导出</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link {% if request.resolver_match.url_name == 'export_excavation_calculation_view' %}active{% endif %}" href="{% url 'export_excavation_calculation_view' %}">超欠挖计算导出</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link {% if request.resolver_match.url_name == 'export_excavation_diagnosis_view' %}active{% endif %}" href="{% url 'export_excavation_diagnosis_view' %}">超欠挖诊断导出</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link {% if request.resolver_match.url_name == 'export_tunnel_contour_view' %}active{% endif %}" href="{% url 'export_tunnel_contour_view' %}">隧道轮廓导出</a>#}
{#                </li>#}
{#            </ul>#}
{#        </div>#}
{#    </div>#}
{#</nav>#}
{##}
{#<div class="container">#}
{#    <div class="card">#}
{#        <div class="card-header text-center">#}
{#            <h4>导出超欠挖诊断数据</h4>#}
{#            <span class="badge badge-role {% if is_admin %}badge-admin{% else %}badge-user{% endif %}">#}
{#                {% if is_admin %}管理员：可以导出所有数据{% else %}普通用户：只能导出个人数据{% endif %}#}
{#            </span>#}
{#        </div>#}
{#        <div class="card-body">#}
{#            <form method="GET" action="{% url 'export_excavation_diagnosis_records' %}">#}
{#                <!-- 选择字段 -->#}
{#                <div class="mb-3">#}
{#                    <label for="fields" class="form-label">选择需要导出的字段：</label>#}
{#                    <div class="row">#}
{#                        {% for field in fields %}#}
{#                            <div class="col-md-4 mb-2">#}
{#                                <div class="form-check">#}
{#                                    <input class="form-check-input" type="checkbox" name="fields" id="{{ field.name }}" value="{{ field.name }}" checked>#}
{#                                    <label class="form-check-label" for="{{ field.name }}">#}
{#                                        {{ field.label }}#}
{#                                    </label>#}
{#                                </div>#}
{#                            </div>#}
{#                        {% endfor %}#}
{#                    </div>#}
{#                </div>#}
{#                <!-- 提交按钮 -->#}
{#                <div class="text-center">#}
{#                    <button type="submit" class="btn btn-export btn-lg">导出为 Excel</button>#}
{#                </div>#}
{#            </form>#}
{#        </div>#}
{#    </div>#}
{#</div>#}
{##}
{#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>#}
{#</body>#}
{#</html>#}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导出超欠挖诊断数据</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #e8f4fc; /* 浅蓝色背景 */
            font-family: "Arial", sans-serif;
        }
        .container {
            margin-top: 50px;
            margin-bottom: 50px;
            padding-left: 30px; /* 增加左侧内边距 */
            padding-right: 30px; /* 增加右侧内边距 */
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #6c9ecd; /* 淡蓝色 */
            color: white;
            text-align: center;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            padding: 20px;
        }
        .btn-export {
            background-color: #ade4c0; /* 更浅绿色 */
            border-color: #ade4c0;
            color: #2f6a44;
        }
        .btn-export:hover {
            background-color: #98d3ae; /* 鼠标悬停时更深一点 */
            border-color: #98d3ae;
        }
        .badge-role {
            font-size: 1.2rem;
            padding: 10px 15px;
            border-radius: 15px;
            margin-top: 15px;
            display: inline-block;
            background-color: #ffffff; /* 白色背景 */
            color: #6c9ecd; /* 与标题同色 */
            border: 1px solid #6c9ecd;
        }
        .form-check-label {
            font-size: 1.3rem;
            font-weight: 500;
        }
        .form-check-input {
            transform: scale(1.8);
            margin-right: 15px;
        }
        .data-selection {
            margin-left: 20px; /* 增加左侧整体间距 */
            margin-right: 20px; /* 增加右侧整体间距 */
        }
        .data-selection .col-md-6 {
            padding: 15px 0;
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" href="#" style="font-weight: bold;">数据导出</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link {% if request.resolver_match.url_name == 'export_geological_view' %}active{% endif %}" href="{% url 'export_geological_view' %}">掌子面导出</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.resolver_match.url_name == 'export_excavation_calculation_view' %}active{% endif %}" href="{% url 'export_excavation_calculation_view' %}">超欠挖计算导出</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.resolver_match.url_name == 'export_excavation_diagnosis_view' %}active{% endif %}" href="{% url 'export_excavation_diagnosis_view' %}">超欠挖诊断导出</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.resolver_match.url_name == 'export_tunnel_contour_view' %}active{% endif %}" href="{% url 'export_tunnel_contour_view' %}">隧道轮廓导出</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="card">
        <div class="card-header">
            <h4>导出超欠挖诊断数据</h4>
            <span class="badge badge-role">
                {% if is_admin %}管理员：可以导出所有数据{% else %}普通用户：只能导出个人数据{% endif %}
            </span>
        </div>
        <div class="card-body">
            <form method="GET" action="{% url 'export_excavation_diagnosis_records' %}">
                <!-- 选择字段 -->
                <div class="mb-4">
                    <label for="fields" class="form-label fw-bold">选择需要导出的字段：</label>
                    <div class="row data-selection">
                        {% for field in fields %}
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="fields" id="{{ field.name }}" value="{{ field.name }}" checked>
                                    <label class="form-check-label" for="{{ field.name }}">
                                        {{ field.label }}
                                    </label>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <!-- 提交按钮 -->
                <div class="text-center">
                    <a href="{% url 'index' %}" class="btn btn-secondary btn-lg px-5 mx-2">返回</a>
                    <button type="submit" class="btn btn-export btn-lg px-5">导出为 Excel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

